<!--
> Muaz Khan     - www.MuazKhan.com
> MIT License   - www.WebRTC-Experiment.com/licence
> Documentation - github.com/muaz-khan/RecordRTC/tree/master/MRecordRTC
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Audio+Video Recording using MRecordRTC</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
    <meta name="author" content="Muaz Khan">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="https://www.webrtc-experiment.com/style.css">

    <style>
    audio {
        vertical-align: bottom;
        width: 10em;
    }

    video {
        max-width: 100%;
        vertical-align: top;
    }

    input {
        border: 1px solid #d9d9d9;
        border-radius: 1px;
        font-size: 2em;
        margin: .2em;
        width: 30%;
    }

    p,
    .inner {
        padding: 1em;
    }

    li {
        border-bottom: 1px solid rgb(189, 189, 189);
        border-left: 1px solid rgb(189, 189, 189);
        padding: .5em;
    }

    label {
        display: inline-block;
        width: 8em;
    }
    </style>
    <script>
    document.createElement('article');
    document.createElement('footer');
    </script>

    <!-- script used for audio/video/gif recording -->
    <script src="https://www.webrtc-experiment.com/RecordRTC.js"></script>
    <script src="https://www.webrtc-experiment.com/DetectRTC.js"></script>
    <script src="https://www.webrtc-experiment.com/gif-recorder.js"></script>
    <script src="https://www.webrtc-experiment.com/getMediaElement.js"></script>

    <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
</head>

<body>
    <article>
        <header style="text-align: center;">
            <h1>
                Audio+Video Recording using MRecordRTC
            </h1>
            <p>
                <a href="https://www.webrtc-experiment.com/">HOME</a>
                <span> &copy; </span>
                <a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a> .
                <a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a> .
                <a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a> .
                <a href="https://github.com/muaz-khan/WebRTC-Experiment/issues?state=open" target="_blank">Latest issues</a> .
                <a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">What's New?</a>
            </p>
        </header>

        <div class="github-stargazers"></div>

        <section class="experiment">
            <button id="start">Start</button>
            <button id="stop">Stop</button>
            <button id="get">Get</button>
            <button id="save" disabled>Save</button>
            <div id="videos-container"></div>
            <audio id="audio"></audio>
        </section>

        <script>
        function captureUserMedia(mediaConstraints, successCallback, errorCallback) {
            navigator.mediaDevices.getUserMedia(mediaConstraints).then(successCallback).catch(errorCallback);
        }

        var videosContainer = document.getElementById('videos-container');

        var mRecordRTC = new MRecordRTC();
        mRecordRTC.mediaType = {
            audio: true, // or StereoAudioRecorder or MediaStreamRecorder (WebAssembly also supports audio-encoding however not implemented in WebAssemblyRecorder YET)
            video: true  // or WhammyRecorder      or MediaStreamRecorder or WebAssemblyRecorder or CanvasRecorder
        };

        if (DetectRTC.browser.name === 'Edge') {
            // Microsoft Edge currently supports only audio and gif recording
            mRecordRTC.mediaType = {
                audio: StereoAudioRecorder
            };
        }
        // mRecordRTC.bufferSize = 16384;

        document.querySelector('#start').onclick = function() {
            this.disabled = true;

            captureUserMedia({
                audio: true,
                video: true
            }, function(stream) {
                var video = document.createElement('video');
                video.autoplay = true;
                video.srcObject = stream;

                var mediaElement = getMediaElement(video, {
                    buttons: [],
                    showOnMouseEnter: false,
                    enableTooltip: false,
                    onMuted: function() {
                        document.querySelector('#audio').muted = true;
                    },
                    onUnMuted: function() {
                        document.querySelector('#audio').muted = false;
                        document.querySelector('#audio').play();
                    }
                });
                videosContainer.appendChild(mediaElement);

                mRecordRTC.addStream(stream);
                mRecordRTC.startRecording();
            }, function(error) {
                alert(JSON.stringify(error));
            });
        };

        document.querySelector('#stop').onclick = function() {
            this.disabled = true;

            mRecordRTC.stopRecording(function(url, type) {
                document.querySelector(type).srcObject = null;
                document.querySelector(type).src = url;
                document.querySelector(type).play();

                // fixing firefox playback issue
                if (!!navigator.mozGetUserMedia) {
                    document.querySelector(type).onended = function() {
                        document.querySelector(type).srcObject = null;
                        document.querySelector(type).src = URL.createObjectURL(mRecordRTC.getBlob()[type]);
                        document.querySelector(type).play();
                    };
                }

                mRecordRTC.writeToDisk();
                save.disabled = false;
            });
        };

        document.getElementById('save').onclick = function() {
            this.disabled = true;
            mRecordRTC.save();
        };

        document.querySelector('#get').onclick = function() {
            this.disabled = true;

            !!navigator.webkitGetUserMedia && MRecordRTC.getFromDisk('all', function(dataURL, type) {
                if (!dataURL) return;

                if (type == 'audio') {
                    document.querySelector('#audio').src = dataURL;
                }
                if (type == 'video') {
                    var video = document.createElement('video');
                    video.src = dataURL;
                    var mediaElement = getMediaElement(video, {
                        buttons: ['mute-video'],
                        showOnMouseEnter: false,
                        enableTooltip: false,
                        onMuted: function() {
                            document.querySelector('#audio').muted = true;
                        },
                        onUnMuted: function() {
                            document.querySelector('#audio').muted = false;
                            document.querySelector('#audio').play();
                        }
                    });
                    videosContainer.appendChild(mediaElement);
                    document.querySelector('#audio').play();
                    mediaElement.media.play();
                }

                if (type == 'gif') {
                    var gifImage = document.createElement('img');
                    gifImage.src = dataURL;
                    videosContainer.appendChild(gifImage);
                }
            });

            !!navigator.mozGetUserMedia && MRecordRTC.getFromDisk('video', function(dataURL) {
                if (!dataURL) return;

                var video = document.createElement('video');
                video.src = dataURL;
                var mediaElement = getMediaElement(video, {
                    buttons: ['mute-video'],
                    showOnMouseEnter: false,
                    enableTooltip: false,
                    onMuted: function() {
                        mediaElement.muted = true;
                    },
                    onUnMuted: function() {
                        mediaElement.muted = false;
                        mediaElement.play();
                    }
                });
                videosContainer.appendChild(mediaElement);
                mediaElement.media.play();
            });
        };

        window.addEventListener('beforeunload', function() {
            document.querySelector('#start').disabled = false;
            document.querySelector('#stop').disabled = false;
            document.querySelector('#get').disabled = false;
        }, false);
        </script>

        <section class="experiment">
            <h2 class="header">Using MRecordRTC...</h2>
            <p style="margin-top: 0;">
                You can record audio in wav/ogg file format; and video in either webm format or as animated GIF image.</p>
        </section>

        <section class="experiment">
            <h2 class="header">
                How to use <a href="https://github.com/muaz-khan/RecordRTC/tree/master/MRecordRTC">MRecordRTC</a>?</h2>
            <pre>
&lt;script src="https://www.webrtc-experiment.com/RecordRTC.js"&gt;&lt;/script&gt;
</pre>
        </section>
        <section class="experiment">
            <pre>
var recorder = new MRecordRTC();
recorder.addStream(MediaStream);
recorder.mediaType = {
   audio: true,
   video: true,
   gif: true
};
// mimeType is optional and should be set only in advance cases.
recorder.mimeType = {
    audio: 'audio/wav',
    video: 'video/webm',
    gif:   'image/gif'
};
recorder.startRecording();
recorder.stopRecording(function(url, type) {
    document.querySelector(type).src = url;
});

recorder.getBlob(function(blobs) {
   blobs.audio --- audio blob
   blobs.video --- video blob
   blobs.gif   --- gif blob
});
// or
var blobs = recorder.getBlob();
var audioBlob = blobs.audio;
var videoBlob = blobs.video;
var gifBlob = blobs.gif;

// invoke save-as dialog
// for all recorded blobs
recorder.save();

recorder.writeToDisk();

// get all blobs from disk
MRecordRTC.getFromDisk('all', function(dataURL, type) {
   type == 'audio'
   type == 'video'
   type == 'gif'
});

// or get just single blob
MRecordRTC.getFromDisk('audio', function(dataURL) {
   // only audio blob is returned from disk!
});
</pre>

        </section>

        <section class="experiment">
            <p style="margin-top: 0;">
                MRecordRTC is MIT licensed on Github! <a href="https://github.com/muaz-khan/RecordRTC/tree/master/MRecordRTC">Documentation</a>
            </p>
        </section>

        <section class="experiment own-widgets">
            <h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/muaz-khan/RecordRTC/issues" target="_blank">RecordRTC Issues</a>
            </h2>
            <div id="github-issues"></div>
        </section>

        <section class="experiment">
            <h2 class="header" id="feedback">Feedback</h2>
            <div>
                <textarea id="message" style="border: 1px solid rgb(189, 189, 189); height: 8em; margin: .2em; outline: none; resize: vertical; width: 98%;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
            </div>
            <button id="send-message" style="font-size: 1em;">Send Message</button>
            <small style="margin-left: 1em;">Enter your email too; if you want "direct" reply!</small>
        </section>

        <section class="experiment own-widgets latest-commits">
            <h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/muaz-khan/RecordRTC/commits/master" target="_blank">Latest Updates</a>
            </h2>
            <div id="github-commits"></div>
        </section>
    </article>

    <a href="https://github.com/muaz-khan/RecordRTC/tree/master/MRecordRTC" class="fork-left"></a>

    <footer>
        <p>
            <a href="https://www.webrtc-experiment.com/">WebRTC Experiments</a> © <a href="https://plus.google.com/+MuazKhan" rel="author" target="_blank">Muaz Khan</a>
            <a href="mailto:muazkh@gmail.com" target="_blank">muazkh@gmail.com</a>
        </p>
    </footer>

    <!-- commits.js is useless for you! -->
    <script>
        window.useThisGithubPath = 'muaz-khan/RecordRTC';
    </script>
    <script src="https://www.webrtc-experiment.com/commits.js" async></script>
</body>

</html>
